---------------------------------------------------------------------------------------
<template lang="jade">
.core_time_box
	.time_name 时间:
	.time_list_box 
		.time_list(:class="{status: 1 == selected}", @click="set('time_mode', 1)") 今天
		.time_list(:class="{status: 2 == selected}", @click="set('time_mode', 2)") 昨天
		.time_list(:class="{status: 3 == selected}", @click="set('time_mode', 3)") 最近7天
		.time_list(:class="{status: 4 == selected}", @click="set('time_mode', 4)") 最近30天
	.liberty
		input.time(type='date',style='float:left', v-model='time_receive_start')
		input.dn(type="checkbox", id="expand", v-model="expand", @click='f_expand()')
		label.expand(for="expand") 
			.state(:class="{on: 1 == expand}")
			a.cont {{expand_test}}
		input.time(v-if="expand", type='date',style='float:left', v-model='time_receive_over')
		button( style='line-height: 11px; margin-left: 10px;', @click="calendar" ) 查询
</template>
---------------------------------------------------------------------------------------
<script>
// import _ from 'lodash'
export default {

 	mounted () {
		// this.$nextTick(function () {
			// this.emit1(1)
			this.set('time_mode')
			// document.getElementById("subbtn"); 
			// console.log(this.Mydata.data.length)
		// })
  },
	data() {
		return {
			time_node:[1,2],
			time: 0,
			today: 0,
			selected: '',
			time_receive_start: '',
			time_receive_over: '',
			expand: false,
			expand_test: '至某个时间'
		}
	},
	methods: {
		f_today () {
			this.time = parseInt(new Date().getTime()/1000)
			this.today = this.time - ( this.time % 86400 )
			if((this.time % 86400)<57600){
				this.today = this.today - 28800
			}else{
				this.today = this.today + 57600
			}
			// alert(this.today)
		},
		emit1(index) { 
			// this.selected = index
			// this.set('time_mode', index)
			this.f_today()
			if(index==1){
				this.time_node[0] = this.time
				this.time_node[1] = this.today
			}else if(index==2) {
				this.time_node[0] = this.today
				this.time_node[1] = this.today - 86400
			}else if(index==3){
				this.time_node[0] = this.today
				this.time_node[1] = this.today - 86400*7
			}else if(index==4){
				this.time_node[0] = this.today
				this.time_node[1] = this.today - 86400*30
			}
			this.$emit('get_time_node', this.time_node)
		},
		f_expand () {
			if (this.expand) {
				this.expand_test = '至'
			} else {
				this.expand_test = '至某个时间'
			}
		},
		// 时间选择器 处理
		option_time(time) {
			// 处理时间节点
			if ( time.start_time != '' && time.over_time != ''  ) {
			let start_time = this.time_transform(time.start_time) - 86399
			let over_time = this.time_transform(time.over_time)
			// 判断 开始时间 与 结束时间 是否选反了
			if ( (over_time - start_time) < 0 ) {
				alert('请选择正确的时间')
				this.set('time_mode', 1)
			} else {
				this.time_node[1] = start_time
				this.time_node[0] = over_time
				this.$emit('get_time_node', this.time_node)
			}
		} else {
				alert('请选择正确的时间')
				this.set('time_mode', 1)
			}

		},
    // 时间转换
    time_transform (return_time) {
      // 时间戳 处理
      let year
      let month
      let day
      let arr = []
      arr = return_time.split('-')
      for (let i = 0; i< arr.length; i++) {
        if (i == 0) {
          year = arr[i] * 1
        }
        if (i == 1) {
          month = arr[i] * 1 - 1
        }
        if (i == 2) {
          day = arr[i] * 1
        }
      }
      let time = new Date(year, month, day, 23, 59, 59)
      time = time.getTime() / 1000
      return time
    },
		set(key, val){
			if (val == null) {
				if (sessionStorage.getItem(key) == null) {
					sessionStorage.setItem(key,JSON.stringify({data:1}))
					this.selected = 1
				} else {
					var data = sessionStorage.getItem(key)
					var dataObj=JSON.parse(data);
					this.selected = dataObj.data
				}	
			} else {
				sessionStorage.setItem(key,JSON.stringify({data:val}))
				this.selected = val
				// 日历 时间 处理
				this.expand = false
				this.time_receive_start = 0

			}
			if (this.selected != 0) {
				this.emit1(this.selected)
			} else {
				this.option('option')
			}
		},
		// 日历时间选择
		option (key, obj) {
			if (obj == null) {
				if (sessionStorage.getItem(key) == null) {
					let time  = {
						start_time: 0,
						over_time: 0,
						state: false
					}
					sessionStorage.setItem(key,JSON.stringify(time))
					this.time_receive_start = time.start_time
					this.time_receive_over = time.over_time
					this.expand = time.state
				} else {
					var data = sessionStorage.getItem(key)
					var dataObj=JSON.parse(data);
					this.time_receive_start = dataObj.start_time
					this.time_receive_over = dataObj.over_time
					this.expand = dataObj.state
					//调用 时间戳转换
					this.option_time(dataObj)
				}	
			} else {
				sessionStorage.setItem(key,JSON.stringify(obj))
				// 四基本选项 处理
				sessionStorage.setItem('time_mode',JSON.stringify({data:0}))
				this.selected = 0
				//调用 时间戳转换
				this.option_time(obj)
			}
		},
		// 日历 显示时间 处理
		calendar () {
			let obj_time = {
				start_time: 0,
				over_time: 0,
				state: false
			}
			if (this.expand) {
				obj_time.start_time = this.time_receive_start
				obj_time.over_time = this.time_receive_over
				obj_time.state = this.expand
			} else {
				obj_time.start_time = this.time_receive_start
				obj_time.over_time = this.time_receive_start
				obj_time.state = this.expand
			}

			// 储存 改变
			this.option('option', obj_time)
		},
		

	},
}
</script>
---------------------------------------------------------------------------------------------------
<style lang="less" scoped>
@import "../../../plugin/style/mixin";

// 数据头部
.core_time_box { .w(100%); .fl(); .mt(10); .brsol(#ddd, 1);
	// 固定时间
	.time_name { .fl(); .lh(26); .ml(15); .mr(8); } 
	.time_list_box { .fl(); .bsol(#ddd, 1);
		.time_list { .fl(); .plr(10); .lh(26); }
		.time_list:hover { .bk(#eee); }
		.status { .bk(#4FA8F9); .c(#fff) }
		.status:hover { .bk(#4FA8F9); .c(#fff) }
	}
	// 自由选择
	.liberty{ .fl(); .ml(20);
		input.time{ .lh(24); .p(0); .plr(5); .bsol(#ddd, 1); }
		input.time::-webkit-outer-spin-button,
		input.time::-webkit-inner-spin-button{ -webkit-appearance: none !important; }
		label.expand { .fl(); }
		.state { .fl(); .w(10); .h(10); .mtb(8); .ml(5); .mr(3); .bsol(#ddd, 1); }
		.on { .bk(#4FA8F9); }
		.cont { .fl(); .lh(24); .mr(5); }
		.dn { .dn(); }
	}
// .list { .fl(); .plr(25); .tc(); .blsol(#ddd, 1); }
}
// .time{ .mr(3%)!important; .lh(22); .bn; outline: none; .c(#636363); display: inline-block; .bk(#fff); .fr; .tr; appearance:none; -webkit-appearance:none; box-sizing: border-box;}


</style>
